<template>
	<view class="bind-phone">
		<view class="gap-v"></view>
		
		<u--form :model="postForm" :rules="postRules" errorType="none" labelPosition="top" labelWidth="auto" ref="postRef" :labelStyle="{'font-size': '30rpx'}">
			<view class="bp-form">
				<view class="gap-v-10"></view>
				
				<u-form-item label="手机号码" prop="mobile" borderBottom>
					<u-input 
						v-model="postForm.mobile" 
						border="none" 
						fontSize="30" 
						placeholder="请输入手机号码" 
						placeholderClass="contact-inputholder" 
					></u-input>
				</u-form-item>
				
				<view class="gap-v-10"></view>
				
				<u-form-item label="验证码" prop="smsCode">
					<u-input 
						v-model="postForm.smsCode" 
						border="none" 
						fontSize="30" 
						placeholder="请输入验证码" 
						placeholderClass="contact-inputholder" 
					></u-input>
					<view class="send-msg" slot="right">
						<u-code
							ref="uCode" 
							seconds="60" 
							keepRunning 
							:startText="buttonText" 
							@change="codeTimeChange"
						></u-code>
						<u-button
							type="primary" 
							shape="circle" 
							size="small" 
							:color="disabledMsgSend ? '#AAAAAA' : '#13a0e7'"
							:disabled="disabledMsgSend" 
							:customStyle="{'height': '60rpx', 'font-size': '24rpx', padding: 0}"
							@click="getVerifyCode"
						>{{ buttonText }}</u-button>
					</view>
				</u-form-item>
			</view>
		</u--form>
		
		<view class="bp-submit">
			<u-button
				type="primary" 
				shape="circle" 
				size="large" 
				color="#13a0e7" 
				:customStyle="{'height': '80rpx', 'font-size': '28rpx'}"
				:loading="submitLoading"
				@click="handleSubmit"
			>确认绑定</u-button>
		</view>
		
		<movable-go-home></movable-go-home>
	</view>
</template>

<script>
	import { sendSms } from "@/api/common.js"
	import { updateMobile } from "@/api/user.js"
	
	const postForm = {
		mobile: '',
		smsCode: '',
	}
	const postRules = {
		mobile: [
			{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
			{
				validator: (rule, value, callback) => uni.$u.test.mobile(value), 
				message: '手机号格式不正确', 
				trigger: ['blur'] ,
			},
		],
		smsCode: [
			{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
			{ type: 'integer', message: '验证码必须整数', trigger: ['blur', 'change'] },
			{ min: 4, max: 6, message: '验证码长度为4-6位', trigger: ['blur', 'change'] }
		]
	}
	export default {
		data() {
			return {
				postForm: postForm,
				postRules: postRules,
				submitLoading: false,
				
				buttonText: '短信验证',
				uCode: {}
			}
		},
		computed: {
			// 是否可发送短信
			disabledMsgSend() {
				return !uni.$u.test.mobile(this.postForm.mobile || '') || !this.uCode?.canGetCode
			}
		},
		onLoad(options) {
			if (options.mobile) {
				uni.setNavigationBarTitle({
					title: '更换绑定手机'
				})
			}
			this.postForm.mobile = options.mobile || ''
			this.$wxSdkUtil.init(null, { hideShare: true })
		},
		onReady() {
			this.uCode = this.$refs.uCode
		},
		methods: {
			// 短信验证码按钮提示的文字 从开始到结束之间 每秒触发一次
			codeTimeChange(text) {
				this.buttonText = text
			},
			// 发送验证码
			async getVerifyCode() {
				try{
					uni.showLoading({ title: '正在获取验证码' })
					await sendSms({ mobile: this.postForm.mobile, type: 3 })
					uni.showToast({
						title: '验证码已发送',
						icon: 'success'
					})
					this.$refs.uCode.start()
				} catch(e){
					uni.showToast({
						title: e.message,
						icon: 'none'
					})
				}
			},
			// 提交
			handleSubmit() {
				this.$refs.postRef.validate().then(async () => {
					try {
						this.submitLoading = true
						await updateMobile(this.postForm)
						uni.showToast({
							title: '绑定成功',
							icon:'success'
						})
						setTimeout(() => uni.navigateBack(), 2000)
					} catch(e) {
						uni.showToast({
							title: e.message,
							icon: 'none'
						})
					} finally {
						this.submitLoading = false
					}
				}).catch(errors => {
					uni.showToast({
						title: errors[0].message || '请填写必填项',
						icon: 'none'
					})
				})
			}
		}
	}
</script>


<style lang="scss">
	.contact-inputholder {
		font-size: 30rpx;
		font-weight: 300;
		line-height: 1.2;
		color: $u-tips-color !important;
	}
</style>
<style lang="scss" scoped>
	.bp-form {
		padding: 0 30rpx;
		background-color: #fff;
	}
	.send-msg {
		width: 170rpx;
	}
	.bp-submit {
		padding: 50rpx 30rpx;
	}
</style>